<template>
  <div>
    <el-tabs v-model="activeTab" class="gl_tabs" type="card">
      <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name" @tab-click="handleTabClick">
        <components :is="item.components" v-if="activeTab === item.name" :branch-id="branchId" :game-type="item.gameType" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import gameList from './components/gameList.vue';
export default {
  components: { gameList },
  props: {
    leaguegameType: {
      type: String,
      default: ''
    },
    branchId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeTab: '',
      tabList: [
        {
          label: '本部联赛',
          name: 'LocalLeague',
          gameType: 'LocalLeague',
          components: gameList
        },
        {
          label: '其他联赛',
          name: 'OtherLeague',
          gameType: 'OtherLeague',
          components: gameList
        }
      ]
    };
  },
  created() {
    this.activeTab = this.leaguegameType || 'LocalLeague';
  },
  methods: {
    handleTabClick(tabItem) {
      this.activeTab = tabItem.paneName;
    }
  }
};
</script>
<style lang="scss" scoped>
.current_mainclub {
  font-size: 16px;
  .mainclub_name {
    font-weight: bold;
    display: inline-block;
    min-width: 100px;
    margin-right: 15px;
  }
}
</style>
